<template>
  <div>
    <div class="button-container">
  <el-button type="primary" @click="showAddDialog">添加</el-button>
  <download-excel
    class="export-btn"
    :data="tableData"
    type="xls"
    header="患者列表"
    name="患者列表.xls"
  >
    <el-button type="primary">导出</el-button>
  </download-excel>
</div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 收费日期列 -->
      <el-table-column prop="CreationDate" label="收费日期"></el-table-column>
      <!-- 治疗名称列 -->
      <el-table-column prop="itemName" label="治疗名称"></el-table-column>
      <!-- 部位列 -->
      <el-table-column prop="format" label="部位"></el-table-column>
      <!-- 编码列 -->
      <el-table-column prop="itemCode" label="编码"></el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button type="text" @click="showEditDialog(scope.row)">修改</el-button>
          <!-- 删除按钮 -->
          <el-button type="text" @click="confirmDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      layout="total, prev, pager, next, jumper">
    </el-pagination>

    <!-- 添加弹出框 -->
    <el-dialog title="添加非药品收费目录" :visible.sync="addDialogVisible">
      <el-form :model="newItem" :rules="addFormRules" ref="addForm">
        <el-form-item label="项目编码" prop="itemCode">
          <el-input v-model="newItem.itemCode"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="itemName">
            <el-input v-model="newItem.itemName"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="format">
            <el-input v-model="newItem.format"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="newItem.price"></el-input>
          </el-form-item>
          <el-form-item label="所属费用科目ID" prop="expClassID">
            <el-input v-model="newItem.expClassID"></el-input>
          </el-form-item>
          <el-form-item label="执行科目ID" prop="deptID">
            <el-input v-model="newItem.deptID"></el-input>
          </el-form-item>
          <el-form-item label="拼音助记" prop="mnemonicCode">
            <el-input v-model="newItem.mnemonicCode"></el-input>
          </el-form-item>
        <!-- 其他表单项省略 -->
        <!-- 添加和取消按钮 -->
        <el-form-item>
          <el-button type="primary" @click="addItem">添加</el-button>
          <el-button @click="resetAddDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog title="修改非药品收费目录" :visible.sync="editDialogVisible">
      <el-form :model="selectedItem" ref="editForm" :rules="editFormRules">
        <el-form-item label="项目编码" prop="itemCode">
          <el-input v-model="selectedItem.itemCode"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="itemName">
            <el-input v-model="newItem.itemName"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="format">
            <el-input v-model="newItem.format"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="newItem.price"></el-input>
          </el-form-item>
          <el-form-item label="所属费用科目ID" prop="expClassID">
            <el-input v-model="newItem.expClassID"></el-input>
          </el-form-item>
          <el-form-item label="执行科目ID" prop="deptID">
            <el-input v-model="newItem.deptID"></el-input>
          </el-form-item>
          <el-form-item label="拼音助记" prop="mnemonicCode">
            <el-input v-model="newItem.mnemonicCode"></el-input>
          </el-form-item>
        <!-- 其他表单项省略 -->
        <!-- 保存和取消按钮 -->
        <el-form-item>
          <el-button @click="updateItem" type="primary">修改</el-button>
          <el-button @click="resetEditDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    
  </div>
</template>

<script>
import  { getListMoreFunPro, addFun, updateFun, deleteByIdFunPro, addBodyFun, getRequerstById } from '../CommonJs/RequestApi';
import JsonExcel from 'vue-json-excel';

export default {
  components: {
    DownloadExcel: JsonExcel
  },
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示数量
      totalItems: 0, // 总条数

      selectedId: null,
      tableData: [], // 表格数据
      addDialogVisible: false, // 添加弹出框可见性
      editDialogVisible: false, // 修改弹出框可见性
      newItem: {
        itemCode: '1200200',
        itemName: '老勾头',
        format: '日',
        price: '200.00',
        expClassID: '16',
        deptID: '133',
        mnemonicCode: 'LGTS',
        creationDate: '2020-03-07 12:12:12',
        lastUpdateDate:null,
        recordType: 1,
        delMark: 1,
        // 其他表单项省略
      },
      selectedItem: {
        id:'',
        itemCode: '',
        itemName: '',
        format: '',
        price: '',
        expClassID: '',
        deptID: '',
        mnemonicCode: '',
        creationDate: '',
        lastUpdateDate:null,
        recordType: '',
        delMark: 1,
        // 其他表单项省略
      },
      addFormRules: {
        // 添加表单的验证规则
        itemCode: [{ required: true, message: '请输入项目编码', trigger: 'blur' }],
        itemName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        // 其他表单项省略
      },
      editFormRules: {
  itemCode: [{ required: true, message: '请输入项目编码', trigger: 'blur' }],
  itemName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  format: [{ required: true, message: '请输入规格', trigger: 'blur' }],
  price: [{ required: true, message: '请输入单价', trigger: 'blur' }],
  expClassID: [{ required: true, message: '请输入所属费用科目ID', trigger: 'blur' }],
  deptID: [{ required: true, message: '请输入执行科目ID', trigger: 'blur' }],
  mnemonicCode: [{ required: true, message: '请输入拼音助记', trigger: 'blur' }],
  // 其他表单项的验证规则...
},
    };
  },

  created() {
    this.fetchTableData(); // 调用获取初始表格数据的方法
    // this.startTimer(); // 启动计时器
  },
  destroyed() {
    this.stopTimer(); // 销毁组件时停止计时器
  },

  methods: {
    fetchTableData() {
      const data = {
        page: (this.currentPage-1)*this.pageSize, // 使用当前页码
        limit: this.pageSize, // 使用每页显示数量
        itemName: "", // 其他查询条件
      };

      getListMoreFunPro('fmeditem/get_fmeditem', data)
        .then(response => {
          this.tableData = response.data.data;
          this.totalItems = response.data.count;
        })
        .catch(error => {
          console.error('查询失败:', error);
        });
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.fetchTableData(); // 定时获取最新数据
      }, 5000); // 每0.5秒刷新一次，可以根据需要调整时间间隔
    },

    stopTimer() {
      clearInterval(this.timer); // 停止计时器
    },
    handleCurrentChange(val){
        this.currentPage = val
        this.fetchTableData()
    },

    updateTableData() {
  const start = (this.currentPage - 1) * this.pageSize;
  const end = start + this.pageSize;
  this.tableData = this.completeTableData.slice(start, end); // 根据当前页码和每页显示的条数切片数据

  // 更新当前页和总页数
  this.totalPages = Math.ceil(this.totalItems / this.pageSize);
  this.currentPage = Math.min(this.currentPage, this.totalPages);
},
      handlePageSizeChange(newSize) {
  this.pageSize = newSize;
  this.currentPage = 1;
  this.fetchTableData();
},
handleCurrentPageChange(newPage) {
  this.currentPage = newPage;
  this.fetchTableData();
},
      // 显示添加弹出框
      showAddDialog() {
        this.addDialogVisible = true;
      },
      // 重置添加弹出框
      resetAddDialog() {
        this.$refs.addForm.resetFields();
        this.addDialogVisible = false;
      },
      // 添加非药品收费目录
      addItem() {
        addBodyFun('fmeditem/add_fmeditem', this.newItem)
          .then(response => {
            if (response.success) {
              this.resetAddDialog();
              this.search();
              this.$message.success('添加成功');
            } else {
              this.$message.success('成功');
              this.addDialogVisible = false;
            }
          })
          .catch(error => {
            console.error('添加失败:', error);
          });
      },
      // 显示修改弹出框
      showEditDialog(row) {
        this.selectedId = { id: row.id };
        getRequerstById('fmeditem/get_fmeditem_id',this.selectedId)
        .then(response =>{
          this.selectedItem = response.data;
          this.editDialogVisible =true;
          this.$nextTick(() => {
          this.$refs.editForm.resetFields(); // 重置表单验证状态
          });
        })
        .catch(error =>{
          console.error('查询失败:',error);
        });
      },
      // 重置修改弹出框
      resetEditDialog() {
        this.$refs.editForm.resetFields();
        this.editDialogVisible = false;
      },
      // 更新非药品收费目录
      updateItem() {
        updateFun('fmeditem/update_fmeditem', this.selectedItem)
          .then(response => {
            if (response.success) {
              this.resetEditDialog();
              this.search();
              this.$message.success('修改成功');
            } else {
              this.$message.success('修改失败');
            }
          })
          .catch(error => {
            console.error('修改失败:', error);
            console.log(error)
          });
      },
      confirmDelete(row) {
    this.$confirm('确认删除该项数据吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        const id = row.id;
        // 发送请求删除数据
        deleteByIdFunPro('fmeditem/delete_fmeditem', id)
          .then(response => {
            location.reload();
            if (response.success) {
              this.fetchTableData(); // 刷新表格数据
              this.$message.success('删除成功');
            }
          })
          .catch(error => {
            console.error('删除失败:', error);
          });
      })
      .catch(() => {
        // 用户点击取消，不执行任何操作
      });
  },
      // 删除非药品收费目录
      deleteItem(id) {
        deleteByIdFunPro('fmeditem/delete_fmeditem', id)
          .then(response => {
            if (response.success) {
              this.search();
              this.$message.success('删除失败');
            } else {
              this.$message.success('删除成功');
            }
          })    
          .catch(error => {
            console.success('成功:', error);
          });
      },
      
    },
  };
</script>
<style>
.button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>